<template>
    <div class="user-container">
        <el-row :gutter="20" class="main-content">
            <!-- 左侧部门树 -->
            <el-col :span="4">
                <el-input 
                    v-model="deptName" 
                    placeholder="搜索部门" 
                    clearable 
                    @input="filterDeptTree"
                    :prefix-icon="Search"
                />
                <el-tree
                    ref="deptTree"
                    :data="deptTreeData"
                    :props="treeProps"
                    @node-click="handleNodeClick"
                    default-expand-all
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    class="dept-tree"
                    style="font-size: 16px;"
                ></el-tree>
            </el-col>

            <!-- 右侧用户列表 -->
            <el-col :span="20">
                <!-- 搜索和按钮区域 -->
                <div class="table-header">
                    <div class="left-btns">
                        <el-button type="primary" @click="handleAdd">新增</el-button>
                        <el-button @click="handleDelete">删除</el-button>
                    </div>
                    
                    <div class="right-search">
                        <el-form :inline="true" :model="queryParams" class="search-form">
                            <el-form-item >
                                <el-input v-model="queryParams.loginName" placeholder="用户名" />
                            </el-form-item>
                            <el-form-item >
                                <el-input v-model="queryParams.phonenumber" placeholder="手机号" />
                            </el-form-item>
                            <el-form-item >
                                <el-select v-model="queryParams.status" style="width:180px;" placeholder="状态">
                                    <el-option label="正常" value="0" />
                                    <el-option label="停用" value="1" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="handleQuery">搜索</el-button>
                                <el-button @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                
                <!-- 用户列表表格 -->
                <el-table
                    :data="userList"
                    style="width: 100%"
                    v-loading="loading"
                    border
                    class="user-table"
                >
                    <el-table-column prop="loginName" label="用户名" />
                    <el-table-column prop="userName" label="昵称" />
                    <el-table-column prop="phonenumber" label="手机号" />
                    <el-table-column prop="deptName" label="部门" />
                    <el-table-column prop="status" label="状态">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                                {{ scope.row.status === '0' ? '正常' : '停用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button type="primary" link @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                    <el-pagination
                        v-model:current-page="queryParams.pageNum"
                        v-model:page-size="queryParams.pageSize"
                        :page-sizes="[10, 20, 30, 50]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getDeptList } from '@/api/system/dept';
import { getUserList } from '@/api/system/user';
import { Search } from '@element-plus/icons-vue';

export default {
    name: 'SystemUser',
    data(){
        return{
            deptName: '',
            deptTreeData: [],
            treeProps: {
                label: 'deptName', 
                children: 'children'
            },
            userList: [],
            loading: false,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                loginName: '',
                phonenumber: '',
                status: '',
                deptId: undefined
            }
        }
    },
    setup() {
        return {
            Search
        }
    },
    methods:{
        handleNodeClick(data){
            this.queryParams.deptId = data.deptId
            this.handleQuery()
        },
        async getDeptTreeData(){
            const result = await getDeptList()
            this.deptTreeData = result.data.data
        },
        async handleQuery() {
            this.loading = true
            try {
                const result = await getUserList(this.queryParams)
                console.log(result)
                this.userList = result.data.data.data
                this.total = result.data.data.total
            } finally {
                this.loading = false
            }
        },
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                username: '',
                phone: '',
                status: '',
                deptId: undefined
            }
            this.handleQuery()
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.handleQuery()
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.handleQuery()
        },
        handleEdit(row) {
            // TODO: 实现编辑功能
            console.log('编辑', row)
        },
        handleDelete(row) {
            // TODO: 实现删除功能
            console.log('删除', row)
        },
        filterNode(value, data) {
            if (!value) return true
            return data.deptName.toLowerCase().includes(value.toLowerCase())
        },
        filterDeptTree(val) {
            this.$refs.deptTree.filter(val)
        }
    },
    created(){
        this.getDeptTreeData()
        this.handleQuery()
    }
}
</script>

<style scoped>
.user-container {
    padding: 20px;
    height: 100%;
}

.main-content {
    background-color: #fff;
    padding: 20px;
    height: 100%;
}

.dept-tree {
    margin-top: 8px;
    height: calc(100% - 40px);
    overflow-y: auto;
}

.search-form {
    margin: 0;
}

:deep(.el-form-item) {
    margin-bottom: 0;
    margin-right: 8px;
}

:deep(.el-form-item__label) {
    font-weight: normal;
}

:deep(.el-input__wrapper) {
    width: 180px;
}

.user-table {
    margin: 0;
}

.pagination-container {
    padding: 8px 0;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #ebeef5;
}

/* 美化滚动条 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 3px;
}

::-webkit-scrollbar-track {
    background: #f5f7fa;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #ebeef5;
}

.left-btns {
    display: flex;
}

.right-search {
    display: flex;
    align-items: center;
}
</style>
